import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/components/FontIcon.dart';
import 'package:todo_app/components/TextExt.dart';
import 'package:todo_app/constants/DColor.dart';
import 'package:todo_app/controllers/definitions/UserModel.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/layout/Space.dart';
import 'package:todo_app/utils/AppNavigator.dart';
import 'package:todo_app/utils/mqtt/LocalMqttClient.dart';


class UserAvatar extends StatelessWidget {
  final double size;
  final String? url;
  final bool? online;
  final bool? showOnline;

  const UserAvatar({ super.key, required this.size, this.url, this.online = false, this.showOnline = false });

  @override
  Widget build(BuildContext context) {
    var onlineSize = size * 0.2;
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(size / 2),
          child: Container(
            width: size,
            height: size,
            color: DColor.gray,
            alignment: Alignment.center,
            child: url != null ? CachedNetworkImage(
              imageUrl: url!,
              width: size,
              height: size,
              fit: BoxFit.cover,
            ) : Container(
              margin: EdgeInsets.only(bottom: size*0.1),
              child: FontIcon(
                icon: FontIcons.user,
                color: Colors.white,
                size: size * 0.68,
              ),
            ),
          ),
        ),
        Positioned(
          bottom: onlineSize*0.2,
          right: onlineSize*0.2,
          width: onlineSize,
          height: onlineSize,
          child: Offstage(
            offstage: showOnline != true,
            child: Container(
              width: onlineSize,
              height: onlineSize,
              decoration: BoxDecoration(
                color: online == true ? DColor.oliver : DColor.gray,
                border: Border.all(color: Colors.white, width: onlineSize * 0.1),
                borderRadius: BorderRadius.circular(onlineSize / 2)
              ),
            ),
          )
        )
      ]
    );
  }
}

class UserCard extends HookWidget {
  const UserCard({Key? key, required this.user, this.pingPong }) : super(key: key);
  final UserModel user;
  final UserClientPingPong? pingPong;

  @override
  Widget build(BuildContext context) {
    bool online = pingPong?.online ?? false;
    return Container(
      margin: EdgeInsets.symmetric(
        vertical: 10.dp
      ),
      child: Space(
        children: [
          UserAvatar(size: 64.dp, url: user.avatar, online: online, showOnline: true,),
          Gaps.hGap8,
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    TextExt.title(user.nickname ?? user.username ?? "", fontSize: 18.dp, bold: true),
                    GestureDetector(
                      onTap: () {
                        AppNavigator.pushNamed("personQrcode", params: {
                          "id": user.id.toString()
                        });
                      },
                      child: const FontIcon(
                        icon: FontIcons.qrcode, 
                        color: DColor.title,
                      ),
                    )
                  ],
                ),
                Gaps.vGap10,
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    TextExt.desc("好友 0"),
                    Gaps.hGap24,
                    TextExt.desc("动态 0")
                  ],
                )
              ],
            )
          )
        ],
      ),
    );
  }
}